<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>学历信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>学历信息列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
            <el-col :span="8">
                <el-input placeholder="学历"  
                class="input-with-select"
                v-model="queryInfo.querystring" clearable
                @clear="geteducationlist">
                <el-button slot="append" icon="el-icon-search" @click="geteducationlist"></el-button>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="addDialogVisible=true">新增学历</el-button>
            </el-col>
        </el-row>
        <!-- 学历信息区域 -->
        <el-table
            :data="educationlist"
             border stripe>
            <el-table-column
                type="index"
                label="#">
            </el-table-column>
            <el-table-column
                prop="eduname"
                sortable
                label="学历">
            </el-table-column>
            <el-table-column
                label="操作" >
                <template slot-scope="scope">
                    <!-- 修改按钮 -->
                    <el-button type="primary" icon="el-icon-edit" 
                    size="mini" @click="showEditDialog(scope.row.id)"></el-button>
                    <!-- 删除按钮-->
                    <el-button type="danger" icon="el-icon-delete" size="mini" 
                    @click="removeUserById(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加学历信息的对话框 -->
        <el-dialog
        title="添加学历" :visible.sync="addDialogVisible"
        width="50%" @close="addDialogClosed">
        <!-- 内容主体区 -->
            <el-form :model="addForm" :rules="addFormRules" 
            ref="addFormRef" label-width="70px"  >
                <el-form-item label="学历" prop="eduname">
                    <el-input v-model="addForm.eduname"></el-input>
                </el-form-item>
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addeducation">确 定</el-button>
            </span>
        </el-dialog>
        <!--修改学历信息的对话框  -->
        <el-dialog
        title="修改学历信息"
        :visible.sync="editDialogVisible"
        width="50%" @close="editDialogClosed">
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学历信息名" prop="eduname">
                    <el-input v-model="editForm.eduname"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editeducationInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return {
            //获取学历信息的参数
            queryInfo:{
                querystring:'',
                pagenum:1,
                pagesize:5
            },
            educationlist:[],
            total:0,
            //控制添加学历信息对话框的显示和隐藏
            addDialogVisible:false,
            //添加学历信息的表单数据
            addForm:{
                eduname:'',
            },
            //添加表单的验证规则对象
            addFormRules:{
                eduname:[
                    {required:true,message:'请输入学历信息名',trigger:'blur'},
                    {min:1,max:10,message:'学历信息名的长度在1~10之间',trigger:'blur'}
                ],
            },
            //控制修改学历信息对话框的显示与隐藏
            editDialogVisible:false,
            //查询到的学历信息信息对象
            editForm:{},
        }
    },
    created(){
        this.geteducationlist()
    },
    methods:{
        async geteducationlist(){
        const {data:res} =await this.$http.get('education',{params:this.queryInfo})
        if(res.meta.status!=200) return this.$message.error(res.meta.msg)
        this.educationlist=res.data.records
        this.total=res.data.total
        },
        //监听pagesize改变的事件
        handleSizeChange(newSize){
            console.log(newSize);
            this.queryInfo.pagesize=newSize
            this.geteducationlist()
        },
        //监听页码值改变的数据
        handleCurrentChange(newPage){
            //console.log(newPage);
            this.queryInfo.pagenum=newPage
            this.geteducationlist()

        },
        //监听添加学历信息对话框的关闭事件
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()

        },
        //点击按钮，添加新学历信息
        addeducation(){
            this.$refs.addFormRef.validate(async valid=>{
                if (!valid) {
                    return
                }
                const {data:res} =await this.$http.post('education',this.addForm)
                if(res.meta.status!=201){
                    this.$message.error(res.meta.msg)
                }
                this.$message.success(res.meta.msg)
                //隐藏
                this.addDialogVisible=false
                this.geteducationlist()
            })

        },

        //展示学历信息编辑的对话框
        async showEditDialog(id){
            //console.log(id);
            const {data:res}=await this.$http.get('education/'+id)
            if(res.meta.status!=200){
                return this.$message.error('获取信息错误')
            }
            this.editForm=res.data
            this.editDialogVisible=true
        },
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()
        },
        //修改学历信息信息
        editeducationInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                if(!valid) return
                //发起请求
                const {data:res} =await this.$http.put('education/'+this.editForm.id,this.editForm)
                if(res.meta.status!=200){
                    this.$message.error('修改学历信息信息失败')
                }
                this.editDialogVisible = false
                this.geteducationlist()
                this.$message.success('修改学历信息信息成功')
                
            })

        },
        //删除学历信息
        async removeUserById(id){
          //弹窗
           const confirmResult =await this.$confirm('此操作将永久删除该学历信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).catch(err=>err)
          //如果学历信息确定删除则返回字符串 confirm
          //如果学历信息取消 则cancel
            if(confirmResult!='confirm'){
                return this.$message.info('已经取消删除')
            }
            console.log('确认删除');
            const {data:res}=await this.$http.delete('education/'+id)
            if(res.meta.status!=200){
                return this.$message.error('删除学历信息失败')
            }
            this.$message.success('删除学历信息成功')
            this.geteducationlist()
          
        }
        
    }
    
}
</script>

<style lang="less" scoped>

</style>